console.log("%c运行环境：" + process.env.NODE_ENV, "color:red");
const model = process.env.NODE_ENV;
const path = require("path");
const webpack = require("webpack");
const { name } = require("./package");
const Timestamp = new Date().getTime();

// 预渲染
// const PrerenderSPAPlugin = require("prerender-spa-plugin");
// const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

// gizp
// const CompressionWebpackPlugin = require("compression-webpack-plugin");

function resolve(dir) {
	return path.join(__dirname, "./", dir);
}
module.exports = {
	// assetsDir: "assets",

	outputDir: "dist",

	// publicPath: model === "production" ? "/vue3" : "/",

	productionSourceMap: model === "development",

	// 是否开启编译时是否不符合eslint提示
	lintOnSave: true,

	devServer: {
		// 解决在局域网下无法访问
		// host: "0.0.0.0",
		port: 1234,

		overlay: {
			warnings: true,
			errors: true,
		},

		// 热更新 开启后test环境报错
		// hotOnly: true,

		proxy: {
			"/api": {
				target: "http://127.0.0.1:8080",
				changeOrigin: true,
			},
			"/test": {
				target: "http://121.36.2.1:22222/",
				ws: true,
				changOrigin: true, // 是否跨域
				pathRewrite: {
					"^/test": "",
				},
			},
			"/download": {
				target: "http://tongtong-img.obs.cn-north-4.myhuaweicloud.com:80/true_1607576257653.pdf",
				ws: true,
				changOrigin: true, // 是否跨域
				pathRewrite: {
					"^/download": "",
				},
			},
			"/upLoadFile": {
				target: "http://121.36.2.1:22222/admin/guest/file/uploadChatFile?creatorId=1002&customerId=1002",
				ws: true,
				changOrigin: true, // 是否跨域
				pathRewrite: {
					"^/upLoadFile": "",
				},
			},
		},
		headers: {
			"Access-Control-Allow-Origin": "*",
		},
	},

	// 配置
	chainWebpack: config => {
		config.resolve.alias
			.set("@", resolve("src"))
			.set("assets", resolve("src/assets"))
			.set("components", resolve("src/components"))
			.set("router", resolve("src/router"))
			.set("utils", resolve("src/utils"))
			.set("static", resolve("src/static"))
			.set("store", resolve("src/store"))
			.set("views", resolve("src/views"));

		// 文件分析
		// config
		//   .plugin("webpack-bundle-analyzer")
		//   .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);

		// 压缩图片 插件经常装不起
		// config.module.rule('images')
		//   .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
		//   .use('image-webpack-loader')
		//   .loader('image-webpack-loader')
		//   .options({ bypassOnDebug: true })
		//   .end()

		// 修复HMR - 热更新失效
		config.resolve.symlinks(true);

		// 压缩代码
		// config.optimization.minimize(true);

		//  删除 prefetch: 当页面很多时，它将导致太多无意义的请求,一般在手机端禁用 ，理论上这个是不影响加载速度的，但是我实际测试会影响一些。
		// config.plugins.delete('prefetch')

		// 移除 preload 插件 ，理论上这个是不影响加载速度的，但是我实际测试会影响一些。
		// config.plugins.delete('preload');

		// 分割代码,抽取公共代码
		config.optimization.splitChunks({
			// 表示选择哪些 chunks 进行分割，async 异步代码分割模式 initial 同步代码分割模式 all  同步异步都分割模式
			chunks: "all",
			// 表示新分离出的chunk必须大于等于minSize，默认为30000，约30kb。
			minSize: 0,
			// 表示一个模块至少应被minChunks个chunk所包含才能分割。默认为1。
			minChunks: 1,
			// 表示按需加载文件时，并行请求的最大数目。默认为5。
			maxAsyncRequests: 5,
			// 表示加载入口文件时，并行请求的最大数目。默认为3。
			maxInitialRequests: 3,
			// 表示拆分出的chunk的名称连接符。默认为~。如chunk~vendors.js
			automaticNameDelimiter: "~",
			// 设置chunk的文件名。默认为true。当为true时，splitChunks基于chunk和cacheGroups的key自动命名。
			name: true,
			// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块，就分配到该组。模块可以被多个组引用，但最终会根据priority来决定打包到哪个组中。默认将所有来自 node_modules目录的模块打包至vendors组，将两个以上的chunk所共享的模块打包至default组。
			cacheGroups: {
				// 公用模块抽离
				commons: {
					minSize: 0,
					minChunks: 1,
					test: resolve("src/components"),
					priority: 5, // 权重 定义打包组的打包顺序优先级，值越大，优先级越高
					reuseExistingChunk: true, // 允许在模块完全匹配时重用现有块而不是创建新块。
				},
				// //第三方库抽离
				vendors: {
					name: "chunk-vendors",
					test: /[\\/]node_modules[\\/]/, // 正则匹配打包分离的文件条件
					priority: 10,
					reuseExistingChunk: true,
				},
				// 第三方库抽离
				elementUI: {
					name: "chunk-elementUI",
					test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
					priority: 20,
					reuseExistingChunk: true,
				},
				fullcalendar: {
					name: "chunk-fullcalendar",
					minSize: 0,
					test: /[\\/]node_modules[\\/]_?fullcalendar(.*)/,
					priority: 20,
					reuseExistingChunk: true,
				},
				three: {
					name: "chunk-three",
					minSize: 0,
					test: /[\\/]node_modules[\\/]_?three(.*)/,
					priority: 20,
					reuseExistingChunk: true,
				},
				bpmnJs: {
					name: "chunk-bpmnJs",
					minSize: 0,
					test: /[\\/]node_modules[\\/]_?bpmn-js(.*)/,
					priority: 20,
					reuseExistingChunk: true,
				},
				quill: {
					name: "chunk-quill",
					minSize: 0,
					test: /[\\/]node_modules[\\/]_?quill(.*)/,
					priority: 20,
					reuseExistingChunk: true,
				},
				moment: {
					name: "chunk-moment",
					minSize: 0,
					test: /[\\/]node_modules[\\/]_?moment(.*)/,
					priority: 20,
					reuseExistingChunk: true,
				},
				// 不知道为什么，有些分包会报错 , 下面这个就会报错，所以暂时不用
				// html2canvas: {
				//   name: "chunk-html2canvas",
				//   minSize: 0,
				//   test: /[\\/]node_modules[\\/]_?html2canvas(.*)/,
				//   priority: 20,
				//   reuseExistingChunk: true,
				// },
			},
		});

		/* vue-worker */
		config.module
			.rule("worker-loader")
			.test(/\.worker\.js$/)
			.use("worker-loader")
			.loader("worker-loader")
			.end();
	},
	configureWebpack: config => {
		config.plugins.push(
			...[
				// 富文本需要
				new webpack.ProvidePlugin({
					"window.Quill": "quill/dist/quill.js",
					Quill: "quill/dist/quill.js",
				}),
				// gzip 压缩代码 这个需要后台配合
				// new CompressionWebpackPlugin({
				//   filename: info => {
				//     return `${info.path}.gz${info.query}`;
				//   },
				//   //压缩算法
				//   algorithm: "gzip",
				//   //匹配文件
				//   test: /\.(js|css|html|svg)$/,
				//   // 只有大小大于该值的资源会被处理 10240
				//   threshold: 10240,
				//   // 只有压缩率小于这个值的资源才会被处理
				//   minRatio: 0.8,
				//   //删除原始文件只保留压缩后的文件
				//   deleteOriginalAssets: false
				// })

				// 预渲染的页面配置
				// new PrerenderSPAPlugin({
				//   // 生成文件的路径，也可以与webpakc打包的一致。
				//   // 下面这句话非常重要！！！
				//   staticDir: path.join(__dirname, "dist"),
				//   // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
				//   // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
				//   // 只能白名单路由且路由只能是一级
				//   routes: ["/login"],
				//   还不清楚这配置
				//   minify: {
				//      collapseBooleanAttributes: true,
				//      collapseWhitespace: true,
				//      keepClosingSlash: true,
				//      decodeEntities: true,
				//      sortAttributes: true,
				//   },
				//   // 这个很重要，如果没有配置这段，也不会进行预编译
				//   renderer: new Renderer({
				//     inject: {
				//       foo: "bar"
				//     },
				//     headless: false,
				//     // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
				//     renderAfterDocumentEvent: "render-event"
				//   })
				// })
			]
		);
		config.externals = {
			// axios: "axios",
			// vue: "Vue",
			// "vue-router": "VueRouter",
			// "element-ui": "ELEMENT",
			// echarts: "echarts",
		};
		config.output = {
			// 把子应用打包成 umd 库格式(必须) 微应用需要
			library: `${name}-[name]`,
			libraryTarget: "umd",
			jsonpFunction: `webpackJsonp_${name}`,
			...config.output,
			// 输出重构  打包编译后的 文件名称  【模块名称.哈希.时间戳】 //避免页面缓存
			/* 1 hash:是根据整个项目来构建,项目构建使用同一个hash， 任何文件改动， 所有hash都会改变 */
			/* 2 chunkhash：根据入口文件(Entry)进行依赖文件解析，对每个模块构建对应chunk，生成对应的hash。文件改变，引用它的文件都将改变 */
			/* 3 contenthash  由文件内容产生hash，内容不会产生的hash也不一样 */
			filename: model !== "development" ? `js/[name].[chunkhash].${Timestamp}.js` : "js/[name].[hash].js",
			chunkFilename: model !== "development" ? `js/[name].[chunkhash].${Timestamp}.js` : "js/[name].[hash].js",
		};
		// 去除 console.log
		// const TerserPlugin = require("terser-webpack-plugin");
		// config.optimization.minimizer.push(
		//   new TerserPlugin({
		//     extractComments: false,
		//     terserOptions: { compress: { drop_console: true } }
		//   })
		// );
	},

	css: {
		// true css不会热更新，是否使用css分离插件 ExtractTextPlugin
		extract: model === "production",
		sourceMap: false,
		loaderOptions: {
			sass: {
				additionalData: `@import "src/assets/style/variable.scss";@import "src/assets/style/mixin.scss";`,
			},
		},
	},
};
